<template>
  <div class="user-management">
    <!-- 搜索区域 -->
    <div class="search-inputs">
      <el-input v-model="searchParams.belongArea" placeholder="请输入贫困户所属地区" clearable
        style="width: 200px; margin-right: 10px;margin-left: 30px;" />
      <el-input v-model="searchParams.headName" placeholder="请输入贫困户姓名" clearable
        style="width: 200px; margin-right: 10px;" />
      <el-button type="primary" @click="handleSearch">查询</el-button>
    </div>

    <!-- 贫困户表格 -->
    <div class="table-container">
      <el-table :data="pagedUsers"  style="width: 100%; margin-top: 20px;">
        <el-table-column prop="familyNumber" label="贫困户编号" width="100" />
        <el-table-column prop="headName" label="户主姓名" width="100" />
        <el-table-column prop="belongArea" label="所属乡村" width="140" />
        <el-table-column prop="gender" label="性别" width="80">
          <template #default="{ row }">
            {{ row.gender === 'M' ? '男' : '女' }}
          </template>
        </el-table-column>
        <el-table-column prop="riskType" label="风险类型" width="190" />
        <el-table-column prop="riskRemark" label="风险备注" width="185" />
        <el-table-column prop="createTime" label="录入时间" width="200">
          <template #default="{ row }">
            {{ row.createTime }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页组件 -->
    <div class="pagination-container">
      <el-pagination 
        v-model:current-page="currentPage" 
        v-model:page-size="pageSize" 
        layout="prev, pager, next, total" 
        :total="totalUsers"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getPoorFamily, updatePoorFamily, addPoorFamily, deletePoorFamily } from '@/api/vselete'

// 分页参数
const currentPage = ref(1)
const pageSize = ref(10)
// 表格需要展示的数据对象数组
const pagedUsers = ref([])
// 搜索参数
const searchParams = reactive({
  belongArea: '',
  headName: '',
  currentPage: currentPage.value,
  pageSize: pageSize.value
})

// 分页的总记录数
const totalUsers = ref(0)

// 查询当前表格中的数据
const queryUser = async () => {
  try {
    searchParams.currentPage = currentPage.value
    searchParams.pageSize = pageSize.value
    
    const res = await getPoorFamily(searchParams)
    if (res.code === 2000) {
      pagedUsers.value = res.data || []
      totalUsers.value = res.total || 0
    } else {
      ElMessage.error(res.message || '获取数据失败')
      pagedUsers.value = []
      totalUsers.value = 0
    }
  } catch (error) {
    ElMessage.error('网络错误，请稍后重试')
    console.error(error)
  }
}

// 页面加载时查询数据
onMounted(() => {
  queryUser()
})

// 处理搜索
const handleSearch = () => {
  currentPage.value = 1 // 重置为第一页
  queryUser()
}

// 处理分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val
  queryUser()
}

// 处理当前页变化
const handleCurrentChange = (val) => {
  currentPage.value = val
  queryUser()
}
</script>

<style scoped>
.el-table__header .cell {
  text-align: center !important;
}

.user-management {
  padding: 20px;
  min-height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.search-area {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
  max-width: 1000px;
}

.search-inputs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

/* 确保按钮文字居中 */
.el-button {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 让表格中所有单元格的文字居中 */
.el-table .cell {
  text-align: center !important;
}

/* 操作按钮样式 */
.action-buttons {
  display: flex;
  justify-content: center;
  gap: 10px;
  align-items: center;
  text-align: center;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  width: 100%;
  max-width: 1000px;
}

.table-container {
  width: 100%;
  max-width: 1000px;
  display: flex;
  justify-content: center;
}

.el-table {
  min-width: 100%;
  table-layout: auto;
}

.el-dialog {
  max-width: 90%;
  margin: 0 auto;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .search-inputs {
    flex-direction: column;
    align-items: flex-start;
  }

  .el-table {
    font-size: 14px;
  }
}
</style>